<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.扩展运算符  深拷贝复制数据
        let z = { a: 3, b: 4 }
        let n = { ...z }
        console.log(n) // { a: 3, b: 4 }
        z.a = 7
        console.log(z) // { a: 7, b: 4 }

        // 等同于Object.assign
        let b = Object.assign({}, z)
        console.log(b) // { a: 7, b: 4 }
        b.a = 9999
        console.log(z, b) // { a: 7, b: 4 }   {a: 9999, b: 4}

        // 2.JSON.parse(JSON.stringify(z)) 深克隆
        let c = JSON.parse(JSON.stringify(z))
        console.log(c) // { a: 7, b: 4 }
        c.a = 99
        console.log(z, c) // { a: 7, b: 4 }   {a: 99, b: 4}

        // 3.扩展运算符只能拷贝一维对象或数组，拷贝不了多维对象或数组
        const obj = { a: 1, b: 2 }
        const { ...x } = obj
        console.log(x) // {a: 1, b: 2}

        const obj2 = { a: { b: 2 } }
        const { ...x2 } = obj2
        obj2.a.b = 99
        console.log(x2) // { a: { b: 99 } } 数据源被改变了

        // 4.合并对象深拷贝
        // let ab = { ...a, ...b }
        // // 等同于
        // let ab = Object.assign({}, a, b)
        // 深拷贝
        let data1 = { a: 3, b: 4 }
        let data2 = { c: 5, d: 6 }
        let data3 = { ...data1, ...data2 }
        data1.a = 5
        console.log(data3) // {a: 3, b: 4, c: 5, d: 6}

    </script>
</head>

<body>

</body>

</html>